<template>
	<div id="home">
		<template v-if="list === null">
			<el-skeleton class="skeleton" v-for="i in 8" :key="i" animated>
				<template slot="template">
					<div class="card-content">
						<div class="info">
							<el-skeleton-item variant="text" class="title" :style="{ width: random(40, 100) + '%' }" />
							<br />
							<el-skeleton-item variant="text" class="date" />
						</div>
						<div class="image"><el-skeleton-item variant="image" class="image-inner" /></div>
					</div>
				</template>
			</el-skeleton>
		</template>
		<template v-else>
			<div v-for="item in list" :key="item.id"><cardItem :obj="item"></cardItem></div>
		</template>

		<pagination v-model="pager" @change="getData"></pagination>
	</div>
</template>

<script>
import cardItem from '@/components/common/cardItem.vue';
import pagination from '@/components/common/pagination.vue';
import { $get } from '@/puigins/request.js';
export default {
	components: {
		cardItem,
		pagination
	},
	data() {
		return {
			pager: {},
			list: null
		};
	},
	created() {
		this.getData(1, 8);
	},
	methods: {
		getData(page, pageSize) {
			$get('/article/getArticleList', { page, pageSize }).then(res => {
				if(res.code==200){
					this.list = res.data.list;
					this.pager = res.data;
				}else{
					this.$msgError(res)
				}
				
			});
		},
		random(a, b) {
			if (isNaN(a)) {
				a = 0x7ffffff;
			}
			if (isNaN(b)) {
				return Math.floor(Math.random() * a);
			}
			return Math.floor(Math.random() * (b - a)) + a;
		}
	}
};
</script>

<style lang="scss">
#home {
	position: relative;
	.skeleton {
		.card-content {
			display: flex;
			margin: 0 28px 0 35px;
			padding: 30px 0;
			border-bottom: 1px solid rgba(128, 128, 128, 0.12);
			align-items: center;
			.info {
				flex: 1;
				padding-right: 15px;
				font-family: lora, songti sc, stsong, simsun, serif;
				.title {
					margin-bottom: 20px;
					height: 35px;
				}
				.date {
					font-size: 16px;
					width: 22%;
					font-family: montserrat, roboto, source sans pro, helvetica, open sans, hiragino sans gb, stheiti, sans-serif;
				}
			}

			.image {
				width: 230px;
				height: 120px;
				.image-inner {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
@media screen and (max-width: 768px) {
	#home {
		.skeleton {
			padding: 0 2px;
			.card-content {
				display: flex;
				margin: 0 0 15px;
				padding: 0;
				border-bottom: none;
				align-items: center;
				flex-direction: column-reverse;
				.info {
					flex: 1;
					width: 100%;
					padding: 15px 20px;
					.title {
						padding-bottom: 0;
						margin-bottom: 5px;
						width: 100%;
						height: 30px;
					}
					.date {
						font-size: 14px;
					}
				}

				.image {
					width: 100%;
					height: 180px;
				}
			}
		}
	}
}
</style>
